<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文档协同服务测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      .section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      button {
        background: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        margin: 5px;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background: #0056b3;
      }
      input {
        padding: 8px;
        margin: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .log {
        background: #000;
        color: #00ff00;
        padding: 10px;
        height: 200px;
        overflow-y: auto;
        font-family: monospace;
        font-size: 12px;
      }
      .status {
        padding: 10px;
        margin: 10px 0;
        border-radius: 4px;
      }
      .status.connected {
        background: #d4edda;
        color: #155724;
      }
      .status.disconnected {
        background: #f8d7da;
        color: #721c24;
      }
    </style>
  </head>
  <body>
    <h1>📝 文档协同服务测试</h1>

    <div class="status disconnected" id="status">❌ 未连接到Socket.io</div>

    <div class="section">
      <h3>Socket.io 连接测试</h3>
      <button onclick="connect()">连接Socket.io</button>
      <button onclick="disconnect()">断开连接</button>
      <button onclick="ping()">发送心跳</button>
    </div>

    <div class="section">
      <h3>房间操作测试</h3>
      <input type="text" id="roomId" placeholder="房间ID" value="room1" />
      <button onclick="joinRoom()">加入房间</button>
      <button onclick="leaveRoom()">离开房间</button>
    </div>

    <div class="section">
      <h3>文档协同测试</h3>
      <button onclick="sendDocumentChange()">发送文档变更</button>
    </div>

    <div class="section">
      <h3>HTTP API 测试</h3>
      <button onclick="testHealth()">健康检查</button>
      <button onclick="testHome()">首页</button>
    </div>

    <div class="section">
      <h3>日志</h3>
      <button onclick="clearLog()">清空日志</button>
      <div class="log" id="log"></div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      let socket = null;
      const log = document.getElementById("log");
      const status = document.getElementById("status");

      function addLog(message, type = "info") {
        const timestamp = new Date().toLocaleTimeString();
        const color = type === "error" ? "#ff6b6b" : type === "success" ? "#51cf66" : "#74c0fc";
        log.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
        log.scrollTop = log.scrollHeight;
      }

      function updateStatus(connected) {
        if (connected) {
          status.className = "status connected";
          status.innerHTML = "✅ 已连接到Socket.io";
        } else {
          status.className = "status disconnected";
          status.innerHTML = "❌ 未连接到Socket.io";
        }
      }

      function connect() {
        socket = io();

        socket.on("connect", () => {
          addLog("Socket.io连接成功", "success");
          updateStatus(true);
        });

        socket.on("connected", data => {
          addLog(`收到连接消息: ${JSON.stringify(data)}`, "success");
        });

        socket.on("pong", data => {
          addLog(`收到心跳响应: ${JSON.stringify(data)}`, "success");
        });

        socket.on("joinedRoom", data => {
          addLog(`加入房间成功: ${JSON.stringify(data)}`, "success");
        });

        socket.on("leftRoom", data => {
          addLog(`离开房间成功: ${JSON.stringify(data)}`, "success");
        });

        socket.on("userJoined", data => {
          addLog(`用户加入: ${JSON.stringify(data)}`, "info");
        });

        socket.on("userLeft", data => {
          addLog(`用户离开: ${JSON.stringify(data)}`, "info");
        });

        socket.on("documentChange", data => {
          addLog(`文档变更: ${JSON.stringify(data)}`, "info");
        });

        socket.on("error", data => {
          addLog(`错误: ${JSON.stringify(data)}`, "error");
        });

        socket.on("disconnect", () => {
          addLog("Socket.io连接断开", "error");
          updateStatus(false);
        });
      }

      function disconnect() {
        if (socket) {
          socket.disconnect();
          addLog("主动断开连接", "info");
        }
      }

      function ping() {
        if (socket) {
          socket.emit("ping");
          addLog("发送心跳", "info");
        } else {
          addLog("请先连接Socket.io", "error");
        }
      }

      function joinRoom() {
        const roomId = document.getElementById("roomId").value;
        if (socket && roomId) {
          socket.emit("joinRoom", { roomId });
          addLog(`请求加入房间: ${roomId}`, "info");
        } else {
          addLog("请先连接Socket.io并输入房间ID", "error");
        }
      }

      function leaveRoom() {
        const roomId = document.getElementById("roomId").value;
        if (socket && roomId) {
          socket.emit("leaveRoom", { roomId });
          addLog(`请求离开房间: ${roomId}`, "info");
        } else {
          addLog("请先连接Socket.io并输入房间ID", "error");
        }
      }

      function sendDocumentChange() {
        const roomId = document.getElementById("roomId").value;
        if (socket && roomId) {
          socket.emit("documentChange", {
            roomId,
            changes: {
              type: "insert",
              position: 0,
              content: "Hello World!"
            }
          });
          addLog("发送文档变更", "info");
        } else {
          addLog("请先连接Socket.io并输入房间ID", "error");
        }
      }

      async function makeRequest(url) {
        try {
          const response = await fetch(url);
          const data = await response.json();
          addLog(`HTTP GET ${url}: ${JSON.stringify(data, null, 2)}`, "success");
        } catch (error) {
          addLog(`HTTP请求错误 ${url}: ${error.message}`, "error");
        }
      }

      function testHealth() {
        makeRequest("/health");
      }

      function testHome() {
        makeRequest("/");
      }

      function clearLog() {
        log.innerHTML = "";
      }

      // 页面加载完成
      window.onload = function () {
        addLog("页面加载完成，可以开始测试", "info");
      };
    </script>
  </body>
</html>
